<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>贝贝语音</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: url(/mobile/img/login-bg.jpg);
    background-color: #05071D;
    height: 100vh;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
  }

  .login-box {
    width: 100%;
    padding: 0 40px;
  }

  .van-cell {
    background-color: #1E1E42;
    border-radius: 25px;
    padding: 15px 20px;
    height: 50px;
  }

  .van-field__control {
    color: #fff;
  }

  .form-input {
    margin-bottom: 16px;
  }

  .login-type {
    color: #82808A;
    font-size: 12px;
    margin-top: 14px;
  }

  .send-text {
    color: #fff;
  }

  </style>
</head>

<body>
  <div id="app">
    <div class="login-box">
      <van-form @submit="onSubmit">
        <div class="form-input">
          <van-field v-model="mobile" name="mobile" maxlength="11" clearable :border="false" placeholder="请输入手机号"></van-field>
        </div>
        <div class="form-input">
          <van-field v-if="loginType === 1" class="form-input" v-model="password" clearable :type="pwdHide ? 'password' : 'text'" name="password" :border="false" placeholder="请输入密码">
            <template #button>
              <img v-if="pwdHide" @click="showPwd(false)" src="/mobile/img/pwd-hide.png" width="24px" height="24px" style="vertical-align: middle;" alt="">
              <img v-else @click="showPwd(true)" src="/mobile/img/pwd-show.png" width="24px" height="24px" style="vertical-align: middle;" alt="">
            </template>
          </van-field>
          <van-field v-else class="form-input" v-model="code" name="code" maxlength="6" clearable :border="false" placeholder="请输入短信验证码">
            <template #button>
              <span v-if="!sendState" class="send-text" @click="sendSMS">发送验证码</span>
              <span v-else class="send-text">重新发送({{sec}})</span>
            </template>
          </van-field>
        </div>
        <van-button :disabled="loginDisabled" :loading="loading" round block color="linear-gradient( 270deg, #9358F4 0%, #6E53F3 100%)" native-type="submit">立即登录</van-button>
      </van-form>
      <div class="login-type" v-if="loginType === 1" @click="setLoginType(2)">验证码登录</div>
      <div class="login-type" v-else @click="setLoginType(1)">密码登录</div>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      loginType: 1, // 1 密码登录 2 验证码登录
      mobile: '',
      password: '',
      code: '',
      pwdHide: true,
      sendState: false,
      sec: 10,
      interval: null,
      sendSuccess: false
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
    },
    computed: {
      loginDisabled() {
        if (this.loginType === 1) {
          return !this.mobile || !this.password
        }
        return !this.mobile || !this.code || !this.sendSuccess
      }
    },
    methods: {
      setLoginType(type) {
        if (type === 1) {
          this.password = ''
        } else {
          this.code = ''
        }
        this.loginType = type
      },
      showPwd(state) {
        this.pwdHide = state
      },
      sendSMS() {
        this.sec = 10
        if (!this.mobile) {
          this.$toast('请输入手机号')
          return
        }
        if (!/^1[345789]\d{9}$/.test(this.mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        this.sendState = true
        this.interval = setInterval(() => {
          if (this.sec <= 0) {
            this.sec = 0
            this.sendState = false
            clearInterval(this.interval)
          } else {
            this.sec--
          }
        }, 1000)
        var query = `mobile=${this.mobile}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/auth/social/auth/getCaptcha?${str}`).then(res => {
          console.log(res)
          this.$toast('验证码发送成功')
          this.sendSuccess = true
        })
      },
      onSubmit(form) {
        console.log(form)
        if (this.loginType === 1) {
          this.loading = true
          var query = `mobile=${form.mobile}&password=${form.password}`
          var str = ISCRYPT ? `args=${encrypt(query)}` : query
          request.get(`/api/auth/pub/password/login?${str}`, {
            headers: {
              loginOutFlag: '1'
            }
          }).then(res => {
            console.log(res)
            this.loading = false
            sessionStorage.setItem('token', res.data.token)
            sessionStorage.setItem('userNickname', res.data.userNickname)
            sessionStorage.setItem('avatar', res.data.avatar)
            sessionStorage.setItem('mobile', res.data.mobile)
            sessionStorage.setItem('uid', res.data.uid)
            location.href = '/mobile/finance/profit.html?token=' + res.data.token
          }).catch(e => {
            console.log(e)
            this.loading = false
          })
        } else {
          this.loading = true
          var query = `mobile=${form.mobile}&code=${form.code}`
          var str = ISCRYPT ? `args=${encrypt(query)}` : query
          request.get(`/api/auth/pub/auth/loginByCaptcha?${str}`, {
            headers: {
              loginOutFlag: '1'
            }
          }).then(res => {
            console.log(res)
            this.loading = false
            sessionStorage.setItem('token', res.data.token)
            sessionStorage.setItem('userNickname', res.data.userNickname)
            sessionStorage.setItem('avatar', res.data.avatar)
            sessionStorage.setItem('mobile', res.data.mobile)
            sessionStorage.setItem('uid', res.data.uid)
            location.href = '/mobile/finance/profit.html?token=' + res.data.token
          }).catch(e => {
            console.log(e)
            this.loading = false
          })
        }
      }
    }
  })
  </script>
</body>

</html>